<template>
  <el-dialog
  title="题目预览"
  :visible.sync="previewDialog"
  width="900px"
  @close="closeDialog"
  @open="openDialog"
  >
  <div class='container'>
     <!-- 属性区 -->
    <div class="props">
      <!-- 第一行 -->
      <el-row style="height:30px">
         <!-- 题型 -->
          <el-col :span="6">【{{ $t("table.questionType") }}】: {{ formatQuestionType(questionInfo.questionType)}}</el-col>
           <!-- 编号 -->
          <el-col :span="6">【{{ $t("table.number") }}】: {{ questionInfo.id }}</el-col>
          <!-- 难度 -->
          <el-col :span="6">【{{ $t("table.difficulty") }}】: {{ formatQDifficulty(questionInfo.difficulty)}} </el-col>
          <!-- 标签 -->
          <el-col :span="6">【{{ $t("question.tags") }}】: {{ questionInfo.tags }} </el-col>
      </el-row >
      <!-- 第二行 -->
       <el-row style="height:30px">
         <!-- 学科 -->
          <el-col :span="6">【{{ $t("table.subject") }}】: {{ questionInfo.subjectName }} </el-col>
           <!-- 目录 -->
          <el-col :span="6">【{{ $t("table.directory") }}】: {{ questionInfo.directoryName }} </el-col>
          <!-- 方向 -->
          <el-col :span="6">【{{ $t("question.direction") }}】: {{ questionInfo.direction }} </el-col>
      </el-row>
      <hr />
    </div>
    <!-- 题干区 【】-->
    <div class="title">
      <p>【{{ $t('table.questionStem') }}】:</p>
      <div style="color: blue" v-html="questionInfo.question"></div>
      <!-- 单选 -->
      <div v-if="questionInfo.questionType === '1'">
        <p>
          {{ $t('question.singleChoice') }}
          {{ $t('question.options') }}
          {{ $t('question.rightAnswer') }}
        </p>
        <el-radio-group :value="rightChoice" >
          <el-radio
          v-for="item in questionInfo.options"
          :key="item.id"
          :label="item.code"
          class="radio"
          >
          {{ item.title }}
          </el-radio>
        </el-radio-group>
      </div>
      <!-- 多选 -->
      <div v-if="questionInfo.questionType === '2'">
        <p>
          {{ $t('question.multipleChoice') }}
          {{ $t('question.options') }}
          {{ $t('question.rightAnswer') }}
        </p>
        <el-checkbox-group :value="checkList">
          <el-checkbox
          v-for="item in questionInfo.options"
          :key="item.code"
          :label="item.coode"
          class="checkbox"
          >
          {{ item.title }}
          </el-checkbox>
        </el-checkbox-group>
      </div>
      <hr />
    </div>
    <!-- 下三栏 -->
    <div class="lower">
      <!-- 参考答案 -->
      <el-row>
        【{{ $t('question.refer')}}】 :
        <el-button
        type="danger"
        size="mini"
        @click="showVideo = !showVideo"
        >
        {{ $t('question.viewVideo') }}
        </el-button>
        <!-- 视频 -->
        <div v-show="showVideo">
          <video
          :src="questionInfo.videoURL"
          v-if="questionInfo.videoURL"
          style="margin-top:10px;width:400px"
          controls
          ></video>
          <span v-else>{{ $t("question.noVideo") }}</span>
        </div>
      </el-row>
      <hr />
      <!-- 答案解析 -->
      <el-row type="flex" align="middle">
       <span>【{{ $t('question.answer')}}】</span>  :
        <span v-html="questionInfo.answer"></span>
      </el-row>
      <hr />
        <!-- 题目备注 -->
        <el-row>
          【{{ $t('question.remarks')}}】 : {{ questionInfo.remarks}}
        </el-row>
    </div>
  </div>
  <span slot="footer" class="dialog-footer">
    <el-button  type="primary" @click="closeDialog">{{ $t('tagsView.close') }}</el-button>
  </span>
</el-dialog>

</template>

<script>
import { detail } from '@/api/hmmm/questions'
export default {
  props: {
    previewDialog: {
      type: Boolean,
      default: false
    },
    previewId: {
      type: Number
    }
  },
  data () {
    return {
      questionInfo: {}, // 题目详情
      showVideo: false // 答案解析视频是否显示
    }
  },
  computed: {
    // 单选或多选的正确选项
    rightChoice () {
      const rightArr = this.questionInfo.options.filter(item => item.isRight)
      if (rightArr.length > 1) {
        return rightArr.map(item => item.code)
      } else if (rightArr.length === 1) {
        return rightArr[0].code
      } else {
        return null
      }
    }
  },
  methods: {
    // 关闭弹窗
    closeDialog () {
      this.questionInfo = {}
      this.showVideo = false
      this.$emit('close-previewDialog')
    },
    // 打开弹窗
    openDialog () {
      this.getDetail()
    },
    // 获取试题详情
    async getDetail () {
      const { data } = await detail({ id: this.previewId })
      console.log(data)
      this.questionInfo = data
    },
    // 题型数据处理函数
    formatQuestionType (n) {
      const map = {
        1: this.$t('question.singleChoice'),
        2: this.$t('question.multipleChoice'),
        3: this.$t('question.shortAnswer')
      }
      return map[n]
    },
    // 难度数据处理函数
    formatQDifficulty (n) {
      const map = {
        1: this.$t('question.simple'),
        2: this.$t('question.ordinary'),
        3: this.$t('question.hard')
      }
      return map[n]
    }
  }
}
</script>

<style scoped lang='scss'>
  .radio,
  .checkbox {
    display: block;
    line-height: 1.5;
    font-size: 20px;
  }

</style>
